<template>
    <div>
        <el-row style="min-height: 100vh;">
            <el-col :span="18" class="bg-indigo-700 flex items-center justify-center">
                <div>
                    <div class=" text-light-50 font-bold text-5xl mb-4">欢迎光临</div>
                    <div class="text-gray-300">欢迎进入XXXX商城系统</div>
                </div>
            </el-col>
            <el-col :span="6" class="bg-light-50 flex items-center justify-center">
                <div>
                    <div class=" text-black font-bold text-3xl mb-6" style="text-align: center;">欢迎回来</div>
                    <div>
                        <el-form :label-position="labelPosition" :model="formLabelAlign" style="max-width: 260px">
                            <el-form-item>
                                <el-input style="max-width: 100%;" clearable :prefix-icon="User" placeholder="请输入账号"
                                    v-model="formLabelAlign.username" />
                            </el-form-item>
                            <el-form-item>
                                <el-input style="max-width: 100%;" type="password" show-password clearable
                                    :prefix-icon="Lock" placeholder="请输入密码" v-model="formLabelAlign.password" />
                            </el-form-item>
                            <el-form-item>
                                <el-input style="max-width: 50%;" class="mr-2" clearable :prefix-icon="Key"
                                    placeholder="请输入验证码" v-model="formLabelAlign.captcha" />
                                <img class="w-30" v-if="captchaimg" :src="captchaimg" alt="" @click="changecaptcha">
                                <img class="w-30" v-else src="../../img/checkcode.png" alt="">
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="width: 100%;">
                        <el-button type="primary" class="font-bold p-4 px-8" v-loading.fullscreen.lock="fullscreenLoading"
                            style="display: block; line-height: 0px; margin: 0 auto" @click="loginbtn">登录</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { login, captcha } from '../../../api/api'
import { User, Lock, Key } from '@element-plus/icons-vue'

const router = useRouter()

let labelPosition = ref('left')
let fullscreenLoading = ref(false)   //是否显示加载
let captchaimg = ref('')  //验证码图片
let captchatext = ref('')  //验证码
let formLabelAlign = reactive({   //登录的参数
    username: '',
    password: '',
    captcha: ''
})

//获取二维码
const captchafun = () => {
    captcha().then(res => {
        if (res.data.data.code == 200) {
            captchaimg.value = res.data.data.img
            captchatext.value = res.data.data.captcha
        } else {
            ElMessage.error("验证码获取失败!")
        }
    })
}
captchafun()

//更换二维码
const changecaptcha = () => {
    captchafun()
}

//登录操作
function loginbtn() {
    captchatext.value = captchatext.value.toLowerCase();
    formLabelAlign.captcha = formLabelAlign.captcha.toLowerCase();
    if (formLabelAlign.username == '' || formLabelAlign.password == '') {
        ElMessage.error('账号或密码不能为空！')
        return false
    } else if (captchatext.value == formLabelAlign.captcha) {
        let data = {
            username: formLabelAlign.username,
            password: formLabelAlign.password,
            captcha: formLabelAlign.captcha
        }
        login(data).then(res => {
            console.log(res);
            if (res.data.data.code == 200) {
                localStorage.setItem('token', res.data.data.token)
                localStorage.setItem('realname', res.data.data.realname)
                localStorage.setItem('avatar', res.data.data.avatar)
                fullscreenLoading.value = true
                setTimeout(() => {
                    fullscreenLoading.value = false
                    router.push({ path: '/home/index/index' })
                }, 1000)
            } else {
                ElMessage.error('账号或密码错误！')
            }
        }).catch(err => {
            console.log(err);
        })
    } else {
        ElMessage.error('验证码错误！')
    }

}

</script>


<style scoped></style>